<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <component :is="currComp"></component>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Index',
}
</script>

<script lang="ts" setup>
import Menu from '@/views/components/Menu.vue'
import { ref, type Component } from 'vue'
import Home from '../main/Home.vue'
import emitter from '@/utils/emitter'
import UserManagement from '../main/UserManagement.vue'
import MenuManagement from '../main/MenuManagement.vue'

const currComp = ref<Component>(Home)

const compDict: { [key: string]: Component } = {
  Home: Home,
  UserManagement: UserManagement,
  MenuManagement: MenuManagement,
}

// 绑定事件
emitter.on('update:mainComp', (compName) => {
  currComp.value = compDict[compName]
})
</script>

<style scoped>
.common-layout {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-aside {
  background-color: aqua;
  height: 100%;
  width: 200px;
}
.el-header {
  background-color: rgb(200, 0, 255);
  height: 50px;
  padding: 0;
}
.el-main {
  height: 100%;
  padding: 0;
}
.el-footer {
  background-color: rgb(0, 200, 255);
  height: 50px;
  padding: 0;
}
</style>
